<template>
	<view class="page">
		<view class="doctor-details" @click="show = true">
			<image class="doctor-image" :src="escort.photo || '/static/images/ic_img.png'" mode="aspectFill"></image>
			<view class="doctor-info">
				<view class="doctor-name">{{ escort.name || '' }}</view>
				<!-- <view class="service-times">服务次数：{{ escort.serviceTimes || '' }}</view> -->
				<view class="doctor-score"><uni-rate :readonly="true" :size="12" :margin="3" :value="escort.level"
						:allow-half="true"></uni-rate></view>
				<view class="doctor-introduce">{{ escort.introduction || '' }}</view>
			</view>
		</view>
		<!-- 服务项目 -->
		<view class="project-list">
			<view class="project-title">服务项目</view>
			<view class="project-item" v-for="(item, index) in serviceList" @click="goBook(item)" :key="index">
				<image class="project-image" mode="aspectFill" :src="item.icon || '/static/images/ic_img.png'"></image>
				<view class="project-info">
					<view class="top-info">{{ item.serviceName || '' }} {{ item.subtitle || '' }}</view>
					<view class="serve-price">
						<text>￥{{ item.price || 0 }}</text>
						元/{{ item.specification | statusFilter }}
					</view>
					<view class="bottom-info">
						<view class="tabs" v-if="item.categoryName">{{ item.categoryName || '' }}</view>
					</view>
				</view>
				<view class="booking-btn">预约</view>
			</view>
		</view>
		<!-- 陪诊案例 -->
		<view class="case-list">
			<view class="case-title">陪诊案例</view>
			<scroll-view v-if="exampleList.length" scroll-x class="scroll-view">
				<image v-for="(item, index) in exampleList" :key="index" class="scroll-image"
					:src="item.image || '/static/images/ic_img.png'" mode="aspectFill" @click="lookCase(item)"></image>
			</scroll-view>
			<view v-else class="no-case">陪诊师未上传案例</view>
		</view>
		<!-- 评论 -->
		<view class="comment-list" v-if="commentList.length > 0">
			<view class="top-title">
				<view class="title">客户评价</view>
				<view class="more-comment" @click="moreComment()">
					<view class="more">查看更多</view>
					<image class="more-icon" src="/static/images/ic_next.png"></image>
				</view>
			</view>
			<view class="comment-item" v-for="(item, index) in commentList" :key="index">
				<view class="comment-userInfo">
					<view class="username">{{ item.nickName || '' }}</view>
					<view class="create-time">{{ item.createTime || '' }}</view>
				</view>
				<view class="comment-score"><uni-rate :readonly="true" :size="12" :margin="3" :value="item.level"
						:allow-half="true"></uni-rate></view>
				<view class="comment-content">{{ item.commentContent }}</view>
			</view>
		</view>
		<!-- 底部分享 -->
		<view class="share-fixed">
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="share">
				<image class="share-icon" src="/static/images/share@3x.png"></image>
				<view class="share-text">分享</view>
			</button>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN  -->
			<view @click="toshare">
				<image class="share-icon" src="/static/images/share@3x.png"></image>
				<view class="share-text">分享</view>
			</view>
			<!-- #endif -->
		</view>
		<!-- 可预约时间弹窗 -->
		<book-datetime ref="bookDatetime"></book-datetime>
		<!-- 陪诊师详情弹框 -->
		<u-popup :show="show" mode="center" :round="10">
			<view class="chaperone-introduction">
				<view class="introduction-title">陪诊师简介</view>
				<view class="introduction">{{ escort.introduction }}</view>
				<view class="introduction-btn" @click="show = false">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import BookDatetime from '@/components/book-datetime/book-datetime.vue';
	import {
		getEscortDetail,
		getServiceItemsListByParam,
		escortCommentList,
		requestExampleList
	} from '@/apis/request.js';

	export default {
		components: {
			BookDatetime
		},
		data() {
			return {
				id: '',
				city: {
					id: 350200,
					title: '厦门市'
				},
				escort: {},
				serviceList: [],
				exampleList: [],
				commentList: [],
				show: false
			};
		},
		filters: {
			statusFilter(status) {
				if (status == 0) {
					return '次';
				} else if (status == 1) {
					return '半天';
				} else if (status == 2) {
					return '白天';
				} else if (status == 3) {
					return '夜间';
				} else if (status == 4) {
					return '全天';
				} else {
					return '月';
				}
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.city = uni.getStorageSync('city') || {};
			this.getDetail();
		},
		onShareAppMessage() {
			const user = uni.getStorageSync('userInfo');
			const path = `/pages/LoginPages/mylogin/main?inviteCode=${user.invitationCode}`;
			return {
				title: this.$shareContent,
				imageUrl: this.$shareImageUrl,
				path: path
			};
		},
		methods: {
			getDetail() {
				getEscortDetail({
					escortId: this.id
				}).then(res => {
					this.escort = res;
				});
				getServiceItemsListByParam({
					cityId: this.city.id
				}).then(res => {
					this.serviceList = res;
				});
				requestExampleList({
					escortId: this.id,
					pageNo: 1,
					pageSize: 1000
				}).then(res => {
					this.exampleList = res.records || [];
				});
				escortCommentList({
					escortId: this.id,
					pageNo: 1,
					pageSize: 3,
					sortType: 0,
					status: 0
				}).then(res => {
					this.commentList = res.records || [];
				});
			},
			goBook(item) {
				const category = item.serviceCategory;
				if (category.isEscort == 1 && category.isTreatmentTime == 1) {
					//需要陪诊师和服务时间的需要进行预约时间选择处理
					if (item.specification == 4) {
						this.$refs.bookDatetime.open(this.id, item.id, item.specification);
					} else {
						this.$refs.bookDatetime.open(this.id, item.id, item.specification);
					}
				} else {
					//不用预约时间选择直接跳转
					uni.navigateTo({
						url: '/pages/servePages/serveDetail?id=' + item.id + '&escortId=' + this.id
					});
				}
			},
			moreComment() {
				uni.navigateTo({
					url: '/pages/IndexPages/escortComment?id=' + this.id
				});
			},
			lookCase(item) {
				uni.navigateTo({
					url: `/pages/IndexPages/caseDetail?id=${item.id}`
				});
			},
			toshare() {
				// #ifdef APP-PLUS
				const user = uni.getStorageSync('userInfo') || {};
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 5,
					imageUrl: this.$shareImageUrl,
					title: this.$shareContent,
					miniProgram: {
						id: this.$shareMiniId,
						path: `/pages/LoginPages/mylogin/main?inviteCode=${user.invitationCode}`,
						type: 0, //0-正式版； 1-测试版； 2-体验版
						webUrl: this.$shareWebUrl
					},
					success: ret => {
						console.log(JSON.stringify(ret));
					},
					fail(err) {
						console.log(err);
					}
				});
				// #endif
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #f2f2f2ff;
		height: 100%;
		min-height: 100vh;

		.doctor-details {
			height: 204rpx;
			width: 750rpx;
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #fff;
			display: flex;
			align-items: center;

			.doctor-image {
				flex-shrink: 0;
				width: 144rpx;
				height: 144rpx;
				border-radius: 10rpx;
			}

			.doctor-info {
				margin-left: 20rpx;

				.doctor-name {
					font-size: 30rpx;
					font-weight: bold;
				}

				.service-times {
					margin-top: 5rpx;
					font-size: 24rpx;
					color: #666666;
				}

				.doctor-score {
					margin: 5rpx 8rpx 5rpx 0;

					.score-icon {
						width: 22rpx;
						height: 22rpx;
						margin-right: 8rpx;
					}
				}

				.doctor-introduce {
					color: #666666;
					font-size: 24rpx;
					min-height: 50rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
		}

		.project-list {
			background-color: #fff;
			margin-top: 20rpx;

			.project-title {
				padding: 30rpx 0 0 30rpx;
				color: #020202ff;
				font-size: 34rpx;
				font-weight: bold;
			}

			:last-child {
				border: none;
			}

			.project-item {
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: 2rpx solid #e8e8e8ff;

				.project-image {
					width: 144rpx;
					height: 144rpx;
					border-radius: 10rpx;
				}

				.project-info {
					width: 382rpx;
					margin: 0 40rpx 0 20rpx;

					.top-info {
						font-size: 30rpx;
						color: #333333ff;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.serve-price {
						margin-top: 8rpx;
						font-size: 26rpx;
						color: #a3a3a3;

						text {
							color: #ff290b;
							font-size: 34rpx;
						}
					}

					.bottom-info {
						display: flex;
						margin-top: 10rpx;

						.tabs {
							background-color: #fbf5ecff;
							border: 2rpx solid #faac18ff;
							font-size: 20rpx;
							padding: 4rpx 8rpx;
							margin-right: 8rpx;
							border-radius: 6rpx;
							color: #faac18ff;
						}
					}
				}

				.booking-btn {
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border-radius: 25rpx;
					background-color: #32C59A;
					color: #ffffffff;
					font-size: 24rpx;
				}
			}
		}

		.case-list {
			margin-top: 20rpx;
			padding: 30rpx;
			background-color: #fff;

			.case-title {}

			.no-case {
				font-size: 26rpx;
				color: #bebebe;
				padding: 10rpx 0;
			}

			.scroll-view {
				margin-top: 30rpx;
				display: flex;
				flex-direction: row;
				white-space: nowrap;

				.scroll-image {
					margin-right: 28rpx;
					width: 144rpx;
					height: 144rpx;
					border-radius: 10rpx;
				}
			}
		}

		.comment-list {
			margin-top: 20rpx;
			background-color: #fff;

			.top-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 30rpx 0 30rpx;

				.title {}

				.more-comment {
					display: flex;
					align-items: center;

					.more {
						font-size: 26rpx;
						color: #999999;
						margin-right: 6rpx;
					}

					.more-icon {
						width: 16rpx;
						height: 26rpx;
					}
				}
			}

			:last-child {
				border: none;
			}

			.comment-item {
				border-bottom: 2rpx solid #f2f2f2;
				padding: 30rpx;

				.comment-userInfo {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.username {
						color: #020202;
						font-size: 30rpx;
					}

					.create-time {
						color: #999999;
						font-size: 22rpx;
					}
				}

				.comment-score {
					.score-icon {
						width: 22rpx;
						height: 22rpx;
						margin-right: 8rpx;
					}
				}

				.comment-content {
					color: #666666;
					font-size: 28rpx;
					line-height: 42rpx;
				}
			}
		}

		.share-fixed {
			position: fixed;
			right: 30rpx;
			bottom: 400rpx;
			border-radius: 48rpx;
			padding: 30rpx;
			background-color: #fff;
			box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

			.share-icon {
				width: 38rpx;
				height: 38rpx;
			}

			.share-text {
				font-size: 20rpx;
				color: #333333ff;
			}
		}

		.chaperone-introduction {
			width: 550rpx;

			.introduction-title {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-bottom: 2rpx solid #efefef;
			}

			.introduction {
				padding: 30rpx;
			}

			.introduction-btn {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				color: #5db6ffff;
			}
		}
	}

	/deep/ .u-back-text {
		min-width: 70rpx;
	}

	button::after {
		border: none;
	}

	button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 1.35;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		background-color: #fff;
	}
</style>